<template>
  <div>
  <h1>房价列表</h1>
  <div>
        房型名称:
                    <select v-model="query.typename">
                        <option value="">请选择</option>
                        <option :value="item.typeName" v-for="item in gethouse">{{ item.typeName }}</option>
                    </select>
        <input type="button" value="查询" class="btn btn-success" @click="showw"/>
    </div>
  <table class="table table-bordered">
      <tbody>
          <tr>
              <td>
                <input type="checkbox" v-model="checkAll" @click="CheckAll"/>
              </td>
              <td>房价ID</td>
              <td>房价计划名称</td>
              <td>门店</td>
              <td>房型</td>
              <td>房型价格</td>
              <td>房间数量</td>
              <td>状态</td>
              <td>早餐数量</td>
              <td>日期</td>
          </tr>
          <tr v-for="item in data.list">
              <td>
                <input type="checkbox" v-model="checkOne" :value="item.priceId" @change="CheckOne"/>
              </td>
              <td>{{item.priceId}}</td>
              <td>{{item.housePriceName}}</td>
              <td>{{item.shopName}}</td>
              <td>{{item.typeName}}</td>
              <td>￥{{item.price}}</td>
              <td>{{item.hoomNumber}}</td>
              <td>{{item.state}}</td>
              <td>{{item.breakfastNum}}</td>
              <td>{{moment(item.startTime).format("YYYY/MM/DD")}}-{{ moment(item.endTime).format("YYYY/MM/DD") }}</td>
          </tr>
      </tbody>
  </table>
  <div>
        <span>当前在第{{ query.pageIndex }}/共{{ data.totalPage }}页</span>
        <span>每页显示{{ query.pageSize }}/共{{ data.totalCount }}条</span>
        <select v-model="query.pageSize" @change="ShowList">
            <option :value="item" v-for="item in arr">每页显示{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="Gopage(1)"/>
        <input type="button" value="上一页" @click="Gopage(query.pageIndex-1)"/>
        <span v-for="item in data.totalPage" @click="Gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="Gopage(query.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Gopage(data.totalPage)"/>
        <input type="number" v-model="query.pageIndex"/>
        <input type="button" value="跳转" class="btn btn-warning" @click="Gopage(query.pageIndex)"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();


onMounted(()=>{
  showhouse();
  ShowList();
})




let gethouse:any=ref([])

let arr=ref([3,5,10,20])

const showhouse=()=>
{
    axios
    ({
        url:'/api/House/GetHouse',
        method:'get'
    })
    .then(res=>{
        console.log(res);
        gethouse.value=res.data;
    })
    .catch(err=>{

    })
}

let query:any=reactive
({
    pageIndex:1,
    pageSize:3,
    typename:''
})
 let data:any=reactive
 ({
    totalCount:'',
    totalPage:'',
    list:[]
 })


 const showw=()=>
 {
    query.pageIndex=1;
    ShowList();
 }
//显示房价信息
const ShowList=()=>
{
    axios
    ({
        url:'/api/House/GetHousePrice',
        method:'get',
        params:query
    })
    .then(res=>{
        Object.assign(data,res.data);
    })
    .catch(err=>{

    })
}
//分页
const Gopage=(num:any)=>
{
    if(num<1)
    {
        query.pageIndex=1;
        return;
    }
    if(num>data.totalPage)
    {
        query.pageIndex=data.totalPage;
        return;
    }
    query.pageIndex=num;
    ShowList();
}

let checkAll=ref(false);
let checkOne=ref([])
const CheckAll=()=>
{
    checkAll.value=!checkAll.value;
    if(checkAll.value==true)
    {
        checkOne.value=data.list.map((item:any)=>{
            return item.priceId;
        })
    }
    else
    {
        checkOne.value=[];
    }
}

const CheckOne=()=>
{
    if(checkOne.value.length==data.list.length)
    {
        checkAll.value=true;
    }
    else
    {
        checkAll.value=false;
    }
}


</script>

<style scoped>
span
{
    margin: 0 10px;
}
input
{
    margin: 0 10px;
}
</style>